<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>查询结果</title>

<!-- Google font -->
<link
	href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700"
	rel="stylesheet">

<!-- Bootstrap -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/bootstrap.min.css" />

<!-- Slick -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/slick.css" />
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/slick-theme.css" />

<!-- nouislider -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/nouislider.min.css" />

<!-- Font Awesome Icon -->
<link rel="stylesheet"
	href="${path}/static/front/home/css/font-awesome.min.css">

<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/style.css" />

<!-- 自建Css -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/my.css" />

<!-- layui -->
<link rel="stylesheet" href="${path}/static/common/layui/css/layui.css"  media="all">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->

</head>
<body>
	<!-- HEADER -->
		<header>
			<!-- TOP HEADER -->
			<div id="top-header">
				<div class="container">
					<ul class="header-links pull-left">
						<li><a href="#"><i class="fa fa-phone"></i> 电话号码</a></li>
						<li><a href="#"><i class="fa fa-envelope-o"></i> 1228999026@email.com</a></li>
						<li><a href="#"><i class="fa fa-map-marker"></i> 山东省青岛市黄岛区</a></li>
					</ul>
					<ul class="header-links pull-right">
						<li class = "ExitUser"><a href="#"><i class="fa fa-dollar"></i>${user.username }</a></li>
						<li class = "in_user"><a href="#"><i class="fa fa-user-o"></i> 个人中心</a></li>
					</ul>
					</ul>
				</div>
			</div>
			<!-- /TOP HEADER -->

			<!-- MAIN HEADER -->
			
			
			<div id="header">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<!-- LOGO -->
						<div class="col-md-3">
							<div class="header-logo">
								<a href="${path}/home/home.shtml" class="logo">
									<img src="${path}/static/front/home/img/logo.png" alt="">
								</a>
							</div>
						</div>
						<!-- /LOGO -->

						<!-- SEARCH BAR -->
						<div class="col-md-6">
							<div class="header-search">
								<form action="${path}/selectStore/getSelectStorePage.shtml" method="get">
									<select class="input-select">
										<option value="0">商品名</option>
									</select>
									<input class="input" name = "name" id="selectByProductName" placeholder="根据商品名搜索" >
									<button class="search-btn" id="selectStore">搜索商品</button>
								</form>
							</div>
						</div>
						<!-- /SEARCH BAR -->

						<!-- ACCOUNT -->
						<div class="col-md-3 clearfix">
							<div class="header-ctn">
								<!-- Wishlist -->
								<div>
									<a href="#">
										<i class="fa fa-heart-o"></i>
										<span>我喜欢的</span>
										<div class="qty">2</div>
									</a>
								</div>
								<!-- /Wishlist -->

								<!-- Cart -->
								<div class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" id = "dropDown">
										<i class="fa fa-shopping-cart"></i>
										<span>购物车</span>
										<div class="qty" id="cartCount"></div>
									</a>
									<div class="cart-dropdown">
										<div class="cart-list" >
											<div class="product-widget" id = "productWidget">
												<div>登录后可查看您的购物车概览</div>
											</div>
										</div>
										<div class="cart-btns">
											<a class = "login_cart" href="#">登录</a>
											<a class = "in_cart" href="#" >我的购物车 <i class="fa fa-arrow-circle-right"></i></a>
										</div>
									</div>
								</div>
								<!-- /Cart -->

								
							</div>
						</div>
						<!-- /ACCOUNT -->
					</div>
					<!-- row -->
				</div>
				<!-- container -->
			</div>
			<!-- /MAIN HEADER -->
		</header>
		<!-- /HEADER -->

	<!-- NAVIGATION -->
	<nav id="navigation" style="">
		<!-- container -->
		<div class="container" style="margin: 0 auto;">
			<!-- responsive-nav -->
			<div id="responsive-nav">
				<!-- NAV -->
				<ul class="main-nav nav navbar-nav Category1">
					<c:forEach items="${topCategoryList}" var="topCategory">
						<li style=""><a id="Category1A">${topCategory.name}</a> <c:forEach
								items="${secondCategoryList}" var="secondCategory">
								<c:if test="${secondCategory.parentId==topCategory.id}">
									<ul class="Category2">
										<li id="Category2Li"><a id="Category2A"
											href="${path}/store/getStorePage.shtml?categoryId=${secondCategory.id}">${secondCategory.name}</a>
										</li>
									</ul>
								</c:if>
							</c:forEach></li>
					</c:forEach>
				</ul>
				<!-- /NAV -->
			</div>
			<!-- /responsive-nav -->
		</div>
		<!-- /container -->
	</nav>
	<!-- /NAVIGATION -->

	<!-- SECTION -->
	<div class="section">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">
				<!-- ASIDE -->
				<div id="aside" class="col-md-3">
					<!-- aside Widget -->
					<div class="aside">
						<h3 class="aside-title">当前分类-好货推荐</h3>
						<div class="checkbox-filter">
						<c:forEach items="${list}" var="product" begin="0" end="5">
							<div class="input-checkbox">
								<input type="checkbox" id="category-6"> 
								<label
									for="category-6"> <span></span> ${product.name } <small>(${product.price} )</small>
								</label>
							</div>
						</c:forEach>

							
						</div>
					</div>
					<!-- /aside Widget -->

					<!-- aside Widget -->
					<div class="aside">
						<h3 class="aside-title">价格区间</h3>
						<div class="price-filter">
							<div id="price-slider"></div>
							<div class="input-number price-min">
								<input id="price-min" type="number"> <span
									class="qty-up">+</span> <span class="qty-down">-</span>
							</div>
							<span>-</span>
							<div class="input-number price-max">
								<input id="price-max" type="number"> <span
									class="qty-up">+</span> <span class="qty-down">-</span>
							</div>
						</div>
					</div>
					<!-- /aside Widget -->

					
				</div>
				<!-- STORE -->
				<div id="store" class="col-md-9">
					<c:if test="${list[0].id == null}">
						暂无您搜搜索的商品，可返回主页重新搜索
				  </c:if>

					<!-- store products -->
					<div class="row">
						<c:forEach items="${list}" var="product">
							<!-- product -->
							<div class="col-md-4 col-xs-6">
								<div class="product">
									<div class="product-img">
										<!-- <img src="${path}/static/front/home/img/product01.png" alt=""> -->

										<img
											src="${product.mainImageFullUrl}"
											width=400px height=300px
											alt="">
										<div class="product-label">
											<!--  <span class="sale">-30%</span> -->
											<span class="new" id = "productId${product.id }" value = "${product.id}">NEW</span>
										</div>
									</div>

									<div class="product-body">
										<p class="product-category">${product.subtitle}</p>
										<h3 class="product-name">
											<a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name}</a>
										</h3>
										<h4 class="product-price">
											$${product.price}
											<del class="product-old-price">$990.00</del>
										</h4>
										<div class="product-rating">
											<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
												class="fa fa-star"></i> <i class="fa fa-star"></i> <i
												class="fa fa-star"></i>
										</div>
										<div class="product-btns">
											<button class="add-to-wishlist">
												<i class="fa fa-heart-o"></i><span class="tooltipp">add
													to wishlist</span>
											</button>
											<button class="add-to-compare">
												<i class="fa fa-exchange"></i><span class="tooltipp">add
													to compare</span>
											</button>
											<button class="quick-view">
												<i class="fa fa-eye"></i><span class="tooltipp">quick
													view</span>
											</button>
										</div>
									</div>
									<div class="add-to-cart">
										<button class="add-to-cart-btn insert_cart" id = "${ product.id}">
											<i class="fa fa-shopping-cart"></i> 添加到购物车
										</button>
									</div>
								</div>
							</div>

						</c:forEach>
						<!-- /product -->


					</div>
					<!-- /store products -->

				</div>
				<!-- /STORE -->
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /SECTION -->

	<div id="demo7" style = "margin-left : 600px;height:100px;"></div>
	


	<div id="newsletter" class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					<div class="col-md-12">
						<div class="newsletter">
							<p>	请留下你的 <strong>评论and建议</strong></p>
							<form id="suggest">
								<input class="input" name = "suggest" type="text" placeholder="写下你想说的话">
								<button class="newsletter-btn " onClick="suggestBtn();return false;"><i class="fa fa-envelope"></i> 反馈给我们</button>
							</form>
							<ul class="newsletter-follow">
								<li>
									<a href="#"><i class="fa fa-facebook"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-twitter"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-instagram"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-pinterest"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /NEWSLETTER -->

	<!-- FOOTER -->
		<footer id="footer">
			<!-- top footer -->
			<div class="section">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">进入后台管理</h3>
								<a href="${path}/user/getLoginListPage.action""><i class="fa fa-envelope-o"></i>需要相应权限才可进入</a>
							</div>
						</div>

					</div>
					<!-- /row -->
				</div>
				<!-- /container -->
			</div>
			<!-- /top footer -->
		</footer>
		<!-- /FOOTER -->

	<!-- jQuery Plugins -->


	<script src="${path}/static/front/home/js/jquery.min.js"></script>
	<script src="${path}/static/front/home/js/bootstrap.min.js"></script>
	<script src="${path}/static/front/home/js/slick.min.js"></script>
	<script src="${path}/static/front/home/js/nouislider.min.js"></script>
	<script src="${path}/static/front/home/js/jquery.zoom.min.js"></script>
	<script src="${path}/static/front/home/js/main.js"></script>
	<script src="${path}/static/common/layer/layer.js"></script>
	<script src="${path}/static/common/layui/layui.js"></script>
	<link rel="stylesheet" type="text/css"	href="${path}/static/front/css/reset.css">
	<link rel="stylesheet" type="text/css"	href="${path}/static/front/css/main.css">
	<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
	
	<!-- 分类下拉  -->
	<script>
		$(function() {
			//监听一级菜单移入
			$(".Category1>li").mouseenter(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideDown(300);
			});

			$(".Category1>li").mouseleave(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideUp(300);
			});

		});
	</script>
	
	<script type="text/javascript">
	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  var currPage = 1;
		  var count = ${count};
		  console.log("count = " + count );
		  laypage.render({
			    elem: 'demo7'
			    ,count: count
			    ,first: '首页'
			    ,last: '尾页'
			    ,prev: '<em>←</em>'
			    ,next: '<em>→</em>'
			    ,curr: currPage
			    ,limit:'6'
			    ,jump:function(obj,first){
			    	currPage =obj.curr;  //这里是后台返回给前端的当前页数
                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr  ajax 再次请求
                    	getListData(currPage);
                    }
			    }
			  });
	});
	
	function suggestBtn(){
		// 加入购物车之前首先要判断有没有登录
		// 1、如果没有登录那首先要登录
		// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
		// User user = (User)sesstion.getAttribute("user");
		var user = "${user}";
		var suggestText = $("input:text[name='suggest']").val();
		
		if (user == "") {// 这个用户没有登录,弹出登录框
			layer.open({
				type : 1,
				title : "登录",
				offset : "50px",
				area : [ "370px", "420px" ],
				content : $("#loginFrom")
			});
		} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
			$.post(
					"${path}/home/suggest.shtml",
					{
					 "suggestText":suggestText, 
					},
					function(result) {
						if(result.success) {
							// 如果插入成功，跳转到购物车列表界面
							mylayer.successMsg(result.msg);
						} else {
							mylayer.errorMsg(result.msg);
						}
					},
					"json"
				);
				
			}
	}

	function getListData(currPage){
		console.log("currPage = " + currPage);
		var page = currPage;
		console.log("page = " + page);
		var name = ${name};
		console.log("name =" + name);
		location.href = "${path}/selectStore/getSelectStorePage.shtml?name="+name+"&page="+currPage+"&limit= 6";
	}
	</script>
	
	<!-- 登录框 -->
	<div id="loginFrom" class="login_form fr" style="display: none">
		<div class="login_title clearfix">
			<h1>用户登录</h1>
			<a href="#">立即注册</a>
		</div>
		<div class="form_input">
			<form id="form">
				<input type="text" name="username" class="name_input"
					placeholder="请输入用户名">
				<div class="user_error">输入错误</div>
				<input type="password" name="password" class="pass_input"
					placeholder="请输入密码">
				<div class="pwd_error">输入错误</div>
				<div class="more_input clearfix">
					<input type="checkbox" name=""> <label>记住用户名</label> <a
						href="#">忘记密码</a>
				</div>
			</form>
			<input type="button" name="" value="登录" class="input_submit"
				onclick="submitForm()">
		</div>
	</div>
	<script type="text/javascript">
		$("#dropDown").on(
			"click",
			function(){
				var user = "${user}";
				var name = "${user.username}";
				if (user == "") {// 这个用户没有登录,弹出登录框
					mylayer.errorMsg("您尚未登录");
				} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
					$.post(
							"${path}/store/selectUserCart.shtml",
							 {
								"userId" : "${user.id}"
							  }, 
							  function(listUC) {
									console.log(listUC);
									var html = "<div class='product-widget' ><div class='product-img'><img src='"+listUC[0].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[0].product.id +"&categoryId="+ listUC[0].product.categoryId +"' >"+listUC[0].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[0].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[0].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									for(var i = 1; i < listUC.length; i++) {
										html += "<div class='product-widget' ><div class='product-img'><img src='"+listUC[i].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[i].product.id +"&categoryId="+ listUC[i].product.categoryId +"' >"+listUC[i].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[i].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[i].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									}
									$("#productWidget").html(html); // innerHtml
									console.log("i = " + i);
									$("#cartCount").html(i);
							  	},
							"json"
						);
				}
			}
		);
	
		$(".in_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的购物车",
								"${path}/cart/getCartListPage.shtml");
							}
					});
		
		$(".in_user").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的个人中心",
								"${path}/userInfo/getUserInfoPage.shtml");
							}
					});
		
		$(".login_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successMsg("用户"+userName+"您已登录了");
					}
					});

		$(".insert_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
				
						var productId = $(this).attr("id");
						console.log("productId = " + productId);
					
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						$.post(
								"${path}/cart/insert.shtml",
								{
								 "productId":productId, 
								},
								function(result) {
									if(result.success) {
										// 如果插入成功，跳转到购物车列表界面
										mylayer.successUrl(result.msg, "${path}/cart/getCartListPage.shtml");
									} else {
										mylayer.errorMsg(result.msg);
									}
								},
								"json"
							);
							
						}
					});
		
		$(".ExitUser").on(
				"click",
				function() {
					//退出当前用户
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						mylayer.successMsg("您尚未登录"	);
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						 layer.confirm('确定退出该用户么？', function(index){
					          	$.post(
					          		"${path}/userInfo/ExitUser.shtml",
					          		function(result) {
					          			if(result.success) {
					          				mylayer.successMsg(result.msg);
					          				 location.reload();  
					          			} else {
					          				mylayer.errorMsg(result.msg);
					          			}
					          		},
					          		"json"
					          	);
					          });
					}
				});
		
		function submitForm() {
			$.post(
				"${path}/user/login.action",
				$("#form").serialize(),
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successMsg(result.msg);
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
						var index = parent.layer.getFrameIndex(window.name);
						// js一个方法，定时器，1000毫秒之后自动执行function里面的代码
						setTimeout(function() {
							 // 关闭弹出层
							 parent.layer.close(index); 
							 // 刷新父页面
							 window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
	</script>
	
</body>
</html>
